<template>
  <view class="container">

    <view class="record-list">
		
      <view class="record">
        <view class="record-header">
          <text class="record-title">换胎</text>
          <text class="record-date">2023-02-15</text>
        </view>
        <view class="record-content">
          <text>订单编号：121212112487878</text>
          <text>位置：洛阳市道北路32号XXX小区</text>
          <text>车牌：奔驰FWE4/豫A98FHJ</text>
        </view>
      </view>

      <view class="record">
        <view class="record-header">
          <text class="record-title">拖车</text>
          <text class="record-date">2023-02-15</text>
        </view>
        <view class="record-content">
          <text>订单编号：121212112487878</text>
          <text>起点：洛阳市道北路32号XXX小区</text>
          <text>终点：洛阳市道北路39号XXXXXX小区</text>
          <text>车牌：奔驰FWE4/豫A98FHJ</text>
        </view>
      </view>

      <view class="record">
        <view class="record-header">
          <text class="record-title">搭电</text>
          <text class="record-date">2023-02-15</text>
        </view>
        <view class="record-content">
          <text>订单编号：121212112487878</text>
          <text>位置：洛阳市道北路32号XXX小区</text>
          <text>车牌：奔驰FWE4/豫A98FHJ</text>
        </view>
      </view>
	  
    </view>
  </view>
</template>

<style>
.container {
  padding: 20rpx;
}

.header {
  background-color: #007AFF;
  padding: 20rpx;
  text-align: center;
}

.title {
  color: white;
  font-size: 36rpx;
}

.record-list {
  margin-top: 20rpx;
  background-color: #F7F7F7;
}

.record {
  background-color: #FFFFFF;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  font-size: 32rpx;
  border-bottom: #F7F7F7 solid 10rpx;
}

.record-title {
  color: #007AFF;
}

.record-date {
  color: #999;
}

.record-content {
  font-size: 28rpx;
  line-height: 36rpx;
  color: #333;
}

/* 设置 */
.record-content > text{
	display: block;
	height: 70rpx;
	line-height: 70rpx;
}
</style>
